<template>
  <el-container id="groupsbox">
    <el-aside>
        <el-row class="tac">
            <el-col :span="24">
                <!--:unique-opened="true"-->
                <el-menu
                        :default-openeds="defaultOpeneds"
                        background-color="#F6F6F6"
                        text-color="#666"
                        active-text-color="#549DE8"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <img src="../assets/img/group/icon1.png" alt="">
                            <span>我创建的群组</span>
                        </template>
                        <el-menu-item-group v-for="(item,index) in ownerGroup" :key="item.groupId">
                            <el-menu-item :index="'1-'+index" @click="groupClick(item)">
                                <img src="../assets/img/group/icon2.png" alt="">
                                <span :class="currentindex===item.groupId? 'active':'no-active'">{{item.groupName}}</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <img src="../assets/img/group/icon3.png" alt="">
                            <span>我加入的群组</span>
                        </template>
                        <el-menu-item-group v-for="(item,index) in addedGroup" :key="item.groupId">
                            <el-menu-item :index="'2-'+index" @click="groupClick(item)">
                                <img src="../assets/img/group/icon2.png" alt="">
                                <span :class="currentindex===item.groupId? 'active':'no-active'">{{item.groupName}}</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </el-aside>
    <el-container>
          <el-container v-show="!showsearch">
              <el-header  style="border-bottom:1px solid #F6F6F6;height: 54px;" class='toolbar'>
                  <el-row>
                      <el-button icon="el-icon-arrow-left" @click="handleGoBack">上一级</el-button>
                      <el-breadcrumb separator-class="el-icon-arrow-right" class="tit">
                        <el-breadcrumb-item><i @click="groupInfo(undefined)" :class="currentIndex == -2? 'current':''">{{currentGroup}}</i></el-breadcrumb-item>
                        <el-breadcrumb-item v-if="groupName.length>0"><i @click="getShareDir(tempGroupId,'a')" :class="currentIndex == -1? 'current':''">{{groupName}}</i></el-breadcrumb-item>
                  <template v-for="(item,index) in nameList">
                        <el-breadcrumb-item :key='index'><i @click="getdata(item.id,true)" :class="currentIndex == index ? 'current':''">{{item.name}}</i></el-breadcrumb-item>
                  </template>
</el-breadcrumb>
                  </el-row>
                  <el-row>
                      <el-button-group>
                          <el-button
                                  plain
                                  @click="changeClick1"
                                  :class="showinfo == 1? 'focus' : ''">
                              <i class="fa fa-bars"></i>
                          </el-button>
                          <el-button
                                  plain
                                  @click="changeClick"
                                  :class="showinfo == 2? 'focus' : ''"
                                  icon="el-icon-menu">
                          </el-button>
                      </el-button-group>
                      <el-button
                              class="refresh"
                              @click="refresh"
                              icon="el-icon-refresh"
                              plain>
                      </el-button>
                  </el-row>
              </el-header>
              <el-main >
                  <el-header style="border:1px solid #F6F6F6;height: 54px;">
                      <div class="buttonLeft">
                          <el-button type="primary" :disabled="createDisabled" class="createGroup" @click="addHandle">
                              <i class="fa fa-plus-square-o" aria-hidden="true" style="margin-right: 10px"></i>
                              创建群组
                          </el-button>
                          <el-popover popper-class="grouppopper" placement="bottom" width="100" class="setting" v-model="out">
                              <ul class="settingOptions" v-show="currentGroup=='我创建的群组'">
                                  <li @click.stop @click="addGroup">添加成员</li>
                                  <li @click.stop @click="renameHandle">重命名</li>
                                  <li @click.stop @click="dismissGroup">解散群组</li>
                              </ul>
                              <ul class="settingOptions" v-show="currentGroup=='我加入的群组'">
                                  <li @click.stop @click="outGroup">退出群组</li>
                              </ul>
                              <el-button slot="reference" :disabled="!showgroup"><span style="display:inline-block;padding-left:3px;color:#666">设置</span><i class="el-icon-arrow-down" style="margin-left: 10px;"></i></el-button>
                          </el-popover>
                      </div>
                      <div class="buttonRight">
                          <el-popover
                                  popper-class="groupmember"
                                  placement="bottom"
                                  width="200"
                                  @show="getUserList()"
                                  v-model="showUserList"
                          >
                              <div style="background: white;box-shadow: 5px 5px 5px #eee;border:1px solid #e0e0e0;">
                                  <div style="line-height: 40px;font-weight: bold;border-bottom:1px solid #e0e0e0;display: flex;justify-content: center;position: relative;">
                                      <h3 style="font-weight:bold;font-size: 16px;">成员</h3>
                                      <i
                                              class="el-icon-close"
                                              style="position: absolute;top:12px;right: 10px;cursor: pointer"
                                              @click="showUserList = false"
                                      ></i>
                                  </div>
                                  <p style="text-align: center;" v-show="loading">
                                      <i class="el-icon-loading"></i>
                                  </p>
                                  <ul v-show="!loading" id="userListUl">
                                      <li
                                              style="display: flex; padding:6px 5px; justify-content: space-between"
                                              class="lis"
                                              v-for="item in userList"
                                              :key="item.id"
                                      >
                                          <div style="display: flex">
                                              <img :src="item.headImg"
                                                   alt=""
                                                   v-if="item.headImg!=null"
                                                   width="32"
                                                   height="32"
                                                   style="border-radius: 50%;align-self: center">
                                              <img
                                                      src="http://192.168.1.222:8000/media/avatars/default.png"
                                                      v-else
                                                      alt
                                                      width="32"
                                                      height="32"
                                                      style="border-radius: 50%;align-self: center"
                                              >
                                              <div style="margin-left: 10px; font-size: 12px;">
                                                  <p>{{item.userName}}</p>
                                                  <p>{{item.userEmail}}</p>
                                              </div>
                                          </div>
                                          <span @click="deleteGroupMember(item)" v-show="isOwnerTemp&&item.isOwner!=1">
                  <i class="el-icon-close" style="cursor: pointer;font-size: 12px;"></i>
                </span>
                                      </li>
                                  </ul>
                              </div>
                              <el-button icon="fa fa-user fa-lg" slot="reference"  :disabled="!showgroup" class="members"><span style="display:inline-block;padding:0 5px;color:#666">成员</span><i class="el-icon-arrow-down"></i></el-button>
                          </el-popover>

                      </div>
                  </el-header>
                  <el-container v-show="hasgroup">
                      <el-table
                              v-show="showinfo == 1"
                              size="small"
                              :data="fileList"
                              v-loading="listLoading"
                              element-loading-text="拼命加载中"
                              v-if="listVisible"
                              style="width: 100%;font-family:'宋体'"
                      >
                          <el-table-column width="350" prop="fileName" label="名称">
                              <template slot-scope="scope">
                                  <div class="folder-box" @click="handleCellClick(scope.row)">
                                      <div style="display: flex;align-items: center">
                                          <span :class="'file-icon '+scope.row.iconcls"></span>
                                          <el-tooltip
                                                  class="item"
                                                  effect="dark"
                                                  v-if="scope.row.fileName && $abslength(scope.row.fileName) > 25"
                                                  :content="scope.row.fileName"
                                                  placement="top-start"
                                          >
                                              <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,25))+'...'}}</span>
                                          </el-tooltip>
                                          <span v-else class="file-name">{{scope.row.fileName}}</span>
                                      </div>
                                      <div class="folder-box-options" v-if="scope.row.fileType == 0">
                                          <span style="cursor: pointer; padding-right: 10px" @click.stop @click="downloadFile(scope.row)">
                <i class="fa fa fa-cloud-download" aria-hidden="true"></i>下载
              </span>
                                          <span style="cursor: pointer; padding-right: 10px" @click.stop @click="previewFile(scope.row)">
                <i class="fa fa-file" aria-hidden="true"></i>
                预览
              </span>
                                      </div>
                                  </div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="userEmail" label="创建人">
                              <template slot-scope="scope">
                                  {{ scope.row.realName }}
                              </template>
                          </el-table-column>
                          <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                          <el-table-column width="150" prop="size" label="大小">
                              <template slot-scope="scope">
                                  <span v-if="scope.row.fileType == 1 || scope.row.fileType == undefined">-</span>
                                  <span v-else>{{scope.row.size}}</span>
                              </template>
                          </el-table-column>
                          <el-table-column width="100">
                              <template slot-scope="scope">
                                  <el-button
                                          class="butt"
                                          size="mini"
                                          v-show="scope.row.isFavorites==0"
                                          @click="collectFile(scope.row)"
                                          type="text"
                                  >
                                      <i class="fa fa-star-o" aria-hidden="true"></i>
                                  </el-button>
                                  <el-button
                                          class="butt"
                                          size="mini"
                                          v-show="scope.row.isFavorites==1"
                                          @click="collectFile(scope.row)"
                                          style="margin-left:0"
                                          type="text"
                                  >
                                      <i class="fa fa-star" aria-hidden="true"></i>
                                  </el-button>
                              </template>
                          </el-table-column>
                          <el-table-column>
                          <template slot-scope="scope">
                            <div
                              v-if="$store.state.groupLoadingList.length>0&&$store.state.groupLoadingList[0].id==scope.row.id"
                            >
                              <span>正在下载中：</span>
                              <span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span>
                              <el-progress
                                :percentage="$store.state.groupLoadingList[0].percentComplete"
                                :show-text="true"
                              ></el-progress>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                      <big-icon
                              :tableData="fileList"
                              @downloadFile="downloadFile"
                              @stopDownload='stopDownload'
                              @handleCellClick="handleCellClick"
                              :isGroup="true"
                              :isCollect="isCollect"
                              :showRight="true"
                              v-show="showinfo == 2"
                      ></big-icon>
                  </el-container>
                  <div v-show="!hasgroup" style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column">
                      <img src="../assets/img/group/nogroup1.png" alt="">
                      <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无群组</el-row>
                      <el-row style="font-size:14px;color:#B4B4B4;margin-top:10px;">请点击创建新的群组或者去加入别人的群组</el-row>
                  </div>
              </el-main>
          </el-container>
        <div v-show="showsearch" style="width: 100%;height: 100%; overflow-y: scroll">
            <div>
                <p style="line-height: 30px; font-size: 12px;color: #666;"> <i class="fa fa-search" aria-hidden="true" style="color:#81a9cc;text-indent: 10px;"></i> "{{groupName ? groupName : '我的群组'}}" 中群组<span style="color:red">{{searchInput}}</span> 的搜索结果：</p>
            </div>
            <div v-loading="searchLoading" v-if="hasData">
                <el-table
                        size="small"
                        :data="bigDataList"
                        element-loading-text="拼命加载中"
                        v-if="listVisible"
                        style="min-height: 600px;font-family:'宋体'"
                >
                    <el-table-column width="300" prop="fileName" label="名称">
                        <template slot-scope="scope">
                            <div class="folder-box" @click="handleCellClick(scope.row,true)">
                                <div style="display: flex;align-items: center">
                                    <span :class="'file-icon '+scope.row.iconcls"></span>
                                    <el-tooltip
                                            class="item"
                                            effect="dark"
                                            v-if="scope.row.fileName && $abslength(scope.row.fileName) > 35"
                                            :content="scope.row.fileName"
                                            placement="top-start"
                                    >
                                        <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,35))+'...'}}</span>
                                    </el-tooltip>
                                    <span v-else class="file-name">{{scope.row.fileName}}</span>
                                </div>
                                <div class="folder-box-options" v-if="scope.row.fileType == 0">
                                    <el-popover placement="right" width="90" trigger="hover">
                                        <ul class="settingOptions">
                                            <li @click.stop @click="downloadFile(scope.row)">
                                                <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                                下载
                                            </li>
                                            <li @click.stop @click="previewFile(scope.row)">
                                                <i class="fa fa-file" aria-hidden="true"></i>
                                                文件预览
                                            </li>
                                        </ul>
                                        <i slot="reference" class="el-icon-more-outline" style="cursor: pointer;" @click.stop></i>
                                    </el-popover>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dirName" label="目录" width="200">
                        <template slot-scope="scope">
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    v-if="scope.row.fileName && $abslength(scope.row.fileName) > 35"
                                    :content="scope.row.dirName"
                                    placement="top-start">
                                <span class="dirPath" @click="topath(scope.row)">{{ scope.row.dirName.substring(0,$getFontShowLength(scope.row.fileName,35))+'...'}}</span>
                            </el-tooltip>
                            <span class="dirPath" @click="topath(scope.row)" v-else>{{scope.row.dirName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userEmail" label="创建人">
                        <template slot-scope="scope">
                            {{ scope.row.realName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小">
                        <template slot-scope="scope">
                            <span v-if="scope.row.fileType == 1 || scope.row.fileType == undefined">-</span>
                            <span v-else>{{scope.row.size}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                    <el-table-column label="收藏">
                        <template slot-scope="scope">
                            <el-button
                                    class="butt"
                                    size="mini"
                                    v-show="scope.row.isFavorites==0"
                                    @click="collectFile(scope.row)"
                                    type="text"
                            >
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </el-button>
                            <el-button
                                    class="butt"
                                    size="mini"
                                    v-show="scope.row.isFavorites==1"
                                    @click="collectFile(scope.row)"
                                    style="margin-left:0"
                                    type="text"
                            >
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </el-button>
                            <el-button
                                    class="butt"
                                    size="mini"
                                    v-show="scope.row.isFavorites==undefined"
                                    :disabled="true"
                                    style="margin-left:0"
                                    type="text"
                            >
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div
                                    v-if="$store.state.groupLoadingList.length>0&&$store.state.groupLoadingList[0].id==scope.row.id"
                            >
                                <span>正在下载中：</span>
                                <span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span>
                                <el-progress
                                        :percentage="$store.state.groupLoadingList[0].percentComplete"
                                        :show-text="true"
                                ></el-progress>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="display: flex;justify-content: center;margin-top:30px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="bigdata1.page"
                            :page-sizes="[5, 10,15]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="bigdata1.total">
                    </el-pagination>
                </div>
            </div>
            <div v-else v-loading="searchLoading" style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column" >
                <img src="../assets/img/search.png" alt="">
                <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无搜索结果</el-row>
                <el-row style="font-size:14px;color:#B4B4B4;margin-top:10px;">请更换新的名词重新尝试进行搜索</el-row>
            </div>
        </div>
    </el-container>
    <el-dialog title="创建群组" :visible.sync="addFormVisible">
          <el-form :model="addForm" :rules="addFormRules" status-icon label-width="80px" ref="addForm">
              <el-form-item label="群组名称" prop="name">
                  <el-input v-model="addForm.name"  placeholder="请输入群组名称" clearable @keyup.enter.native="saveGroup"></el-input>
                  <input type="text" style="display: none;">
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="addFormVisible = false">取 消</el-button>
              <el-button type="primary" v-loading="addSubmitLoading" @click="saveGroup">确 定</el-button>
          </div>
      </el-dialog>
    <el-dialog
              class="addPerson"
              title="添加成员"
              :visible.sync="addPersonVisible"
              @close="handelDialogClose"
      >
          <el-form :model="addForm" :rules="addFormRules" status-icon ref="addForm">
              <el-form-item label="成员名称" prop="name" label-width="80px">
                  <el-select
                          v-show="options.length>0"
                          v-model="personSelect"
                          filterable
                          multiple
                          placeholder="请选择"
                          @change="handelSelectChange"
                          :disabled="options==false"
                  >
                      <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                      ></el-option>
                  </el-select>
                  <el-select
                          v-show="options.length==0"
                          v-model="personSelect"
                          filterable
                          multiple
                          placeholder="暂无邀请成员"
                          @change="handelSelectChange"
                          :disabled="options==false"
                  >
                      <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                      ></el-option>
                  </el-select>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="addPersonVisible = false">取 消</el-button>
              <el-button type="primary" v-loading="addSubmitLoading" @click="addPerson">确 定</el-button>
          </div>
      </el-dialog>
    <el-dialog title="重命名群组" :visible.sync="renameFormVisible">
          <el-form
                  :model="renameForm"
                  :rules="renameFormRules"
                  status-icon
                  label-width="80px"
                  ref="renameForm"
          >
              <el-form-item label="群组名称" prop="name">
                  <el-input v-model="renameForm.name" placeholder="请输入群组名称" clearable></el-input>
                  <input type="text" style="display: none;">
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="renameFormVisible = false">取 消</el-button>
              <el-button type="primary" v-loading="renameSubmitLoading" @click="renameGroup">确 定</el-button>
          </div>
      </el-dialog>
  </el-container>
</template>

<script>
  import { mapState, mapMutations } from "vuex";
  import BigIcon from "../components/bigIcon";
  var xhr = new XMLHttpRequest();
  export default {
    components: {BigIcon},
    inject: ["reloadHome"],
    name: 'Groups',
    data() {
      let checkName=(rule, value, callback) => {
        if (!value) {
        return callback(new Error("群组名字不能为空"));
      } else {
        let reg = new RegExp('^[^\\\\\\/:.,、，。*?\\"<>| ]+$');
        if (!reg.test(value)) {
          callback(new Error('命名格式不正确 (群组名不能为全空或包含空格及 【/.、，,。:*?\\"<>|】)'));
        } else if (value.length > 20) {
          callback(new Error("群组名长度超出上限"));
        } else {
          callback();
        }
      }
      };
      return {
        isCollect:false,
        hasgroup:true,
        currentindex:0,
        userList: [],
        showUserList: false,
        out : false,
        defaultOpeneds:["1"],
        showinfo:1,
        msg: 'Welcome to Your Vue.js App',
        ownerGroup:[],
        addedGroup:[],
        groupName:"",
        groupIdTemp: "",
        currentGroup:"我创建的群组",
        currentSearch:"",
        loading: false,
        listVisible: true,
        deleteVisible: false,
        addFormVisible: false,
        addSubmitLoading: false,
        addPersonVisible: false,
        renameFormVisible: false,
        renameSubmitLoading: false,
        listLoading: false,
        fileList:[],
        nameList: [],
        idList: [],
        showgroup:false,
        data1:[],
        data2:[],
        addFormRules: {
          name: [{  validator: checkName ,trigger: "blur",}]
        },
        renameFormRules: {
          name: [{ validator: checkName,trigger: "blur", }]
        },
        addForm: {
          name: ""
        },
        renameForm: {
          name: "",
          id: 0
        },
        isword : false,
        tempGroupId: 0,
        options: [],
        userIdTemp:"",
        personSelect: [],
        showsearch:false,
        inputdata:"",
        searchLoading:false,
        bigDataList:[],
        bigdata1:{},
        currentRow:10,
        currentPage:1,
        currentIndex:-2,
        hasData:true,
        createDisabled:false,
        percentComplete:0,
      }
    },
    created(){
      this.$store.state.canSearch = false;
      this.setSearchInput("");
      this.$store.state.placeHolder = "搜索群组名称"
      this.groupInfo();
    },
    mounted(){
      console.log(sessionStorage.getItem("groupShow"));
      if(sessionStorage.getItem("groupShow") != null){
        this.showinfo = sessionStorage.getItem("groupShow");
      }else{
        this.showinfo = 1;
      }
    },
    watch: {
      searchInput:{
        handler: function (newVal, oldVal) {
          console.log("this is group searchInput new data ", newVal);
          if(newVal != oldVal){
            if(newVal == ""){
              this.showsearch = false;
              if(this.groupIdTemp == ""){
                this.groupInfo(newVal);
              }
            }else{
              this.inputdata = newVal;
              if(this.groupIdTemp == ""){
                this.showsearch = false;
                this.groupInfo(newVal);
              }else{
                this.showsearch = true;
                this.searchBigData();
              }
            }

          }
        }
      },
      // 如果 `addFormVisible` 发生改变，这个函数就会运行
      addFormVisible: function(newQuestion, oldQuestion) {
        if (this.$refs["addForm"] !== undefined) {
          this.$refs["addForm"].clearValidate();
        }
      },
      renameFormVisible: function(newQuestion, oldQuestion) {
        if (this.$refs["renameForm"] !== undefined) {
          this.$refs["renameForm"].clearValidate();
        }
      },
      groupName:{
        handler:function (newVal,oldVal) {
          if(newVal != oldVal){
            console.log("群组名称改变",newVal)
            if(newVal != ""){
              this.currentIndex = -1;
            }else{
              this.currentIndex = -2;
            }
          }
        }
      },
      nameList:{
        handler:function (newVal,oldVal) {
            console.log("文件名称改变",newVal,oldVal);
            if (newVal.length > 0) {
              this.currentIndex = newVal.length-1;
            }else{
              if(this.groupName == ""){
                this.currentIndex = -2;
              }else{
                this.currentIndex = -1;
              }
            }
            console.log(this.currentIndex)
        }
      },
      currentGroup:{
        handler:function (newVal,oldVal) {
          if(newVal != oldVal){
            console.log("群组类型发生变化",newVal);
            if(newVal == "我创建的群组"){
              this.createDisabled = false;
            }else{
              this.createDisabled = true;
            }
          }

        }
      }
    },
    computed: {
      ...mapState(["searchInput","placeHolder","canSearch"])
    },
    methods:{
      ...mapMutations([
        "setSearchInput"
      ]),
      changeClick(){
        this.showinfo = 2;
        sessionStorage.setItem("groupShow",2);
      },
      changeClick1(){
        this.showinfo = 1;
        sessionStorage.setItem("groupShow",1);
      },
      topath(para){
        this.isword = true;
        console.log("点击文字")
        this.handleCellClick(para)
      },
      handleSizeChange(val){
        this.currentRow = val;
        this.searchBigData();
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.searchBigData();
      },
      searchBigData(){
        this.searchLoading = true;
        let groupId;
        let dirId;
        if(this.nameList.length == 0){
          groupId = this.groupIdTemp;
          dirId = 0;
        }else if(this.nameList.length == 1){
          groupId = this.groupIdTemp;
          dirId = this.nameList[0].id;
        }
        console.log("checkid",dirId,groupId);
        this.bigDataList = [];
        this.$http.post("/groupInfo/getFileList",{
          page:this.currentPage,
          rows:this.currentRow,
          searchInfo:this.inputdata,
          groupId:groupId,
          dirId:dirId,
        }).then(res=> {
          console.log("bigdataaaaaaaaa", res);
          if(res.status == 200){
            let {data} = res;
            this.bigdata1 = {
              page: data.page,
              rows: data.rows,
              total: data.total
            }
            this.searchLoading = false;
            if (data.list.length > 0) {
              console.log("有数据")
              this.hasData = true;
              let file_icon;
              data.list.forEach((v, k) => {
                if(v.fileName != null){
                  var suffixTemp = v.fileName.split(".");
                  if (suffixTemp.length > 1) {
                    suffixTemp = suffixTemp[suffixTemp.length - 1];
                    file_icon = "icon_list_" + suffixTemp;
                  }
                  let str = this.groupName + '/';
                  if(v.dirName){
                    v.dirName.forEach((val,key)=>{
                      str =str + val.name + "/"
                    })
                  }
                  let json = [];
                  if(v.dirName){
                    v.dirName.forEach(val=>{
                      json.push({
                        dirId:val.id.split(".")[1],
                        label:val.name,
                        id:val.id.split(".")[0]
                      })
                    })
                  }
                  this.bigDataList.push({
                    id: v.id,
                    dirId: v.dirName == undefined ? undefined : v.dirName[v.dirName.length-1].id.split(".")[0],
                    fileName: v.fileName,
                    size: this.$getFileSize(v.fileSize),
                    updateTime: (v.updateTime == null || v.updateTime == undefined) ?  v.createTime: v.updateTime,
                    suffix: suffixTemp,
                    fileHash: v.fileHash,
                    fileType: v.fileType,
                    iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                    isFavorites: v.isFavorites,
                    realName:v.realName,
                    dirName:str,
                    json:json,
                    fileSize:v.fileSize,
                    fileNameShow:this.getFontShowLength(v.fileName),
                  });
                }
              });
            }else{
              console.log("没有数据在这里")
              this.hasData = false;
              this.searchLoading = false;
            }
          }
        })
      },
      refresh(){
        this.reloadHome();
      },
      outGroup() {
        this.$confirm("确认退出群组" + this.groupName + "吗？", "提示", {}).then(
          () => {
            this.$http
              .post("/groupMember/outGroup", { groupId: this.groupIdTemp })
              .then(res => {
                if (res.status === 200) {
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                  this.out = false;
                  this.groupInfo();
                }
              });
          }
        );
      },
      deleteGroupMember(item) {
        console.log(item);
        this.$confirm("确认删除该成员吗?", "提示", {
          // type: 'warning'
        }).then(() => {
          this.$http.delete("/groupInfo/user/" + item.id).then(res => {
            if (res.status == 200) {
              this.$message({
                message: "刪除成功",
                type: "success"
              });
              this.getUserList();
            } else {
              this.$message.error("刪除失敗");
            }
          });
        });
      },
      getUserList() {
        console.log("groupIdTemp", this.groupIdTemp);
        this.loading = true;
        this.$http
          .post("groupMember/list", {
            groupId: this.groupIdTemp
          })
          .then(res => {
            console.log("111111",res);
            if (res.status == 200) {
              this.userList = res.data;
              this.loading = false;
            }
          });
      },
      dismissGroup() {
        this.out = false;
        this.$confirm("确认解散群组" + this.groupName + "吗？", "提示", {}).then(
          () => {
            this.$http.delete("/groupInfo/" + this.groupIdTemp).then(res => {
              console.log("delete", res);
              if (res.status == 200) {
                this.reloadHome();
                this.$message({
                  type: "success",
                  message: "解散成功"
                });
              }
            });
          }
        );
      },
      renameGroup(para) {
        this.$refs.renameForm.validate(valid => {
          if (valid) {
            console.log("renameSubmit", this.renameForm);
            this.renameSubmitLoading = true;
            this.renameFormVisible = true;
            this.$http
              .get("groupInfo/reGroupName", {
                params: {
                  id: this.renameForm.id,
                  name: this.renameForm.name
                }
              })
              .then(res => {
                console.log(res);
                if (res.status == 200) {
                  this.groupInfo();
                  this.renameSubmitLoading = false;
                  this.renameFormVisible = false;
                  this.$message({
                    type: "success",
                    message: "修改成功"
                  });
                } else {
                  this.$message.error(res.msg);
                  this.renameSubmitLoading = false;
                }
              });
          }
        });
      },
      renameHandle() {
        this.renameFormVisible = true;
        this.out = false;
        console.log(this.groupName);
        console.log(this.groupIdTemp);
        var reg = new RegExp("#");
        this.renameForm.name = this.groupName.replace(reg, "");
        this.renameForm.id = this.groupIdTemp;
      },
      addPerson() {
        if (this.groupIdTemp === "" || this.userIdTemp === "") {
          return;
        }
        this.$http
          .post("/groupInfo/saveGroupUser", {
            groupId: this.groupIdTemp,
            userId: this.userIdTemp
          })
          .then(res => {
            if (res.status == 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.addPersonVisible = false;
            } else {
              this.$message.error(res.msg);
              // this.addPersonVisible = false;
            }
          });
      },
      handelDialogClose() {
        this.personSelect = [];
        this.userIdTemp = "";
      },
      addGroup() {
        this.out = false;
        this.loadAll();
        this.addPersonVisible = true;
      },
      handelSelectChange(item) {
        console.log(item);
        this.userIdTemp = item;
      },
      loadAll() {
        this.options = [];
        this.$http.get("/groupInfo/getCompanyUsers?groupId="+this.tempGroupId).then(res => {
          if (res.status == 200) {
            res.data.forEach((val, key) => {
              if(val.isSelect == 0){
                this.options.push({
                  value: val.id,
                  label: val.realName +" : "+ val.userEmail
                });
              }
            });
          }
        });
      },
      collectFile(row) {
        let message;
        if (row.isFavorites == 0) {
          message = "是否确认收藏文件" + row.fileName;
        } else {
          message = "是否取消收藏" + row.fileName;
        }
        this.$confirm(message, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http
              .get("/favorites/clickCollection", {
                params: {
                  id: row.id
                }
              })
              .then(res => {
                if (res.status == 200) {
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                  if (row.isFavorites == 0) {
                    row.isFavorites = 1;
                  } else {
                    row.isFavorites = 0;
                  }
                } else {
                  this.$message.error("操作失败");
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作"
            });
          });
      },
      handleGoBack() {
        console.log("back  idlist",this.idList)
        console.log("back  namelist",this.nameList);
        let id = this.idList.pop();
        this.nameList.pop();
        if (id == undefined) {
          this.$message("已经是最外层喽");
          return;
        }
        if (id == 0) {
          this.getShareDir(this.tempGroupId);
        } else if( id == -1){
          this.groupIdTemp = "";
          this.$store.state.placeHolder = "搜索群组名称"
          this.groupName = "";
          this.showgroup = false;
          this.groupInfo();
        } else {
          console.log("getdata");
          this.getdata(id);
        }
      },
      handleCellClick(para,issearch) {
        this.setSearchInput("");
        this.showgroup = true;
        this.$store.state.placeHolder = "搜索群组下的文件/文件夹";
        console.log("aaaaaaaaaa",para);
        if(this.isword){
          this.fileDetails(para);
        }else{
          if (para.fileType == 1 || para.fileType == undefined) {
            if(para.isGroup){
              this.groupIdTemp = para.groupId;
              this.getShareDir(para.groupId);
              this.fileDetails(para);
            }else{
              this.fileDetails(para);
            }
          } else {
            if(issearch == true){
              this.fileDetails(para);
            }
            this.previewFile(para);
          }
        }

      },
      //子文件夹目录
      fileDetails(para) {
        this.fileList = [];
        this.listLoading = true;
        if (para.fileType == 1 || this.isword) {
          if(para.isGroup){
            this.groupName = para.groupName;
            this.idList.push(-1);
          }else{
            console.log(para);
            if(para.json != undefined){
              this.nameList = [];
              this.idList = [0,-1];
              para.json.forEach((val,key)=>{
                this.nameList.push({
                  id:val.id,
                  name:val.label
                });
                this.idList.push(val.dirId);
              })
            }
            console.log(this.idList);
            //如果点击的是文字，那就进入当前目录，点击是文件夹，进入文件夹的下一级目录
            if(!this.isword){
              this.nameList.push({
                id:para.id,
                name:para.fileName
              })
              if (para.dirId == undefined) {
                this.idList.push(0);
              } else {
                this.idList.push(para.dirId);
              }
            }else {
              para.id = this.nameList[this.nameList.length-1].id;
              para.dirId = this.idList[this.idList.length-1];
            }
          }
          this.getdata(para.id);
        }else{
          if(para.json != undefined){
            this.nameList = [];
            this.idList = [0,-1];
            para.json.forEach((val,key)=>{
              this.nameList.push({
                id:val.id,
                name:val.label
              });
              this.idList.push(val.dirId);
            })
          }
          para.id = this.nameList[this.nameList.length-1].id;
          para.dirId = this.idList[this.idList.length-1];
          this.getdata(para.id);
        }
      },
      getdata(id, isclick) {
        this.isword = false;
        if(isclick == true){
          this.nameList.forEach((val,key)=>{
            if(val.id == id){
              this.nameList.splice(key+1);
            }
          })
        }
        this.fileList = [];
        this.$http.post("/file/clickdir", { id: id }).then(res => {
          let { data } = res;
          console.log(data);
          if (data !== null) {
            let file_icon;
            data.forEach((v, k) => {
              if(v.fileName != null){
                var suffixTemp = v.fileName.split(".");
                if (suffixTemp.length > 1) {
                  suffixTemp = suffixTemp[suffixTemp.length - 1];
                  file_icon = "icon_list_" + suffixTemp;
                } else if (v.fileType === 0) {
                  suffixTemp = "";
                } else {
                  suffixTemp = null;
                }
                this.fileList.push({
                  id: v.id,
                  dirId: v.dirId,
                  fileName: v.fileName,
                  size: this.$getFileSize(v.fileSize),
                  updateTime: v.updateTime == null ? "暂无数据" : v.updateTime,
                  suffix: suffixTemp,
                  fileHash: v.fileHash,
                  fileType: v.fileType,
                  iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                  isFavorites: v.isFavorites,
                  realName:v.realName,
                  fileNameShow:this.getFontShowLength(v.fileName),
                  fileSize:v.fileSize
                });
              }
            });
            if (res.status == 200) this.listLoading = false;
          } else {
            this.listLoading = false;
          }
        });
      },
      stopDownload(){
      xhr.abort();
      this.$message.info('取消下载');
      this.$store.commit("setGroupLoadingList", []);
      this.$store.commit('setGroupDownBox',0);
    },
      downloadFile(file) {
      let methodType=file.fileSize>1000000000 ? 0 : 1;
      if (this.$store.state.ipfsArray[1] == 0) {
        this.$message.error("获取请求路径失败,请检查网络或呼叫管理员");
      } else {
        if (methodType) {
          if (this.$store.state.groupLoadingList.length > 0) {
        this.$message.warning("请等待当前文件下载完成后，再执行下载操作。");
        return;
      }
      this.$store.commit('setGroupDownBox',1)
      let obj = {
        id: file.id,
        percentComplete: 0
      };
      this.$store.commit("setGroupLoadingList", [obj]);
          this.getBlob(
            this.$store.state.ipfsArray[1] + "ipfs/" + file.fileHash
          ).then(blob => {
            this.$store.commit("setGroupLoadingList", []);
            this.$store.commit('setGroupDownBox',0);
            this.saveAs(blob, file.fileName, true);
          });
        } else {
          this.$message({
            type:'warning',
            message:'大文件需专用通道匿名加速下载，下载后请手动重命名',
            duration:'5000'
          })
          let url = this.$store.state.ipfsArray[1] + "ipfs/" + file.fileHash;
          this.saveAs(url, file.fileName);
        }
      }
    },
    getType(filename) {
      var index1 = filename.lastIndexOf(".");
      var index2 = filename.length;
      var type = filename.substring(index1 + 1, index2);
      return type;
    },
    getBlob(url) {
      let _this = this;
      return new Promise(resolve => {
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        console.log(_this.$store.state.groupLoadingList[0]);
        let obj = _this.$store.state.groupLoadingList[0];
        xhr.addEventListener(
          "progress",
          function(evt) {
            if (evt.lengthComputable) {
              obj.percentComplete = Math.round(
                (evt.loaded / evt.total).toFixed(2) * 100
              );
              _this.$store.commit("setGroupLoadingList", [obj]);
            }
          },
          false
        );
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    saveAs(url, filename, isArr) {
      if (window.navigator.msSaveOrOpenBlob && isArr === true) {
        navigator.msSaveBlob(url, filename);
      } else {
        const link = document.createElement("a");
        const body = document.querySelector("body");
        if (isArr === true) {
          link.href = window.URL.createObjectURL(url);
        } else {
          link.href = url;
        }
        link.download = filename;
        link.type = "application/octet-stream";
        console.log(link.download);
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
      handleImageFile (url) {
        // 使用FileReader来处理
        console.log(url);
        const reader = new FileReader ();
        let _this=this;
        reader.addEventListener ('load', (e) => {
          console.log(e);
          const imgUrl = e.target.result;
          let imgNode = document.createElement('img');
          imgNode.src = imgUrl;
          console.log(imgNode);
          //imgNode.setAttribute('height', '100%');
          imgNode.setAttribute('width', '800px');
          imgNode.style.position='absolute';
          imgNode.style.top='50%';
          imgNode.style.left='50%';
          imgNode.style.transform='translate(-50%, -50%)';
          // imgNode.setAttribute('transform', 'translate(-50%, -50%)');
          _this.createPreviewItem(imgNode);
        });
        reader.readAsDataURL(url);
      },
      handlePdfFile (url) {
        // 使用URL来处理
        const pdfUrl = url;
        let embedNode = document.createElement('embed');
        embedNode.src = pdfUrl;
        embedNode.setAttribute('width', '100%');
        embedNode.setAttribute('height','100%')
        // embedNode.setAttribute('margin-top', '100px');
        embedNode.style.position='absolute';
        embedNode.style.left='0px';
        embedNode.style.top='0px';
        embedNode.style.bottom='0px';
        embedNode.style.right='0px';
        console.log(embedNode);
        this.createPreviewItem(embedNode);
      },
      createPreviewItem (newNode) {
        console.log(newNode);
        let body=document.querySelector("body");
        let box=document.querySelector(".preview-box");
        let iSpan=document.querySelector('.preview-box>span');
        let myul=document.querySelector(".preview-box__ul");
        myul.appendChild(newNode);
        iSpan.addEventListener("click", function(){
          box.style.display = "none";
          myul.removeChild(newNode);
        })
        box.style.display='block';
      },
      previewFile(file){
        console.log(file);
        let arr = ["txt"];
        if (arr.indexOf(this.getType(file.fileName)) != -1) {
          if(this.$store.state.ipfsArray==0){
            this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
          }else{
            this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
              this.imgurl = window.URL.createObjectURL(blob);
              console.log(this.imgurl)
              if(this.imgurl != ""){
                window.open(this.imgurl,"_blank")
              }
            });
          }
        } else if(file.suffix.toLowerCase() == "mp4" || file.suffix.toLowerCase() == "webm" || file.suffix.toLowerCase() == "ogg" ){
          let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style='width:980px;height: 480px'>
                            <video  style='width:980px;height: 480px' controls width='100%' autoplay id="playVideo">
                                <source class="source" src=${url} type="video/mp4">
                            </video>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
        }else if(file.suffix.toLowerCase() == "flv"){
          let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          let data = url;
          let data1 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&BufferTime=3&IsAutoPlay=1";
          let data2 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&IsAutoPlay=1";
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;background: black">
                            <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=${data} width="980" height="480" style="border: 1px solid #549de8">
                                <param name="movie" value="/static/flvplayer.swf">
                                <param name="quality" value="high">
                                <param name="allowFullScreen" value="true">
                                <param name="FlashVars" value=${data1}>
                                <embed src="/static/flvplayer.swf" allowfullscreen="true" flashvars=${data2} quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="480"></embed>
                            </object>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
          // let routeUrl = this.$router.resolve({
          //   path: "/videoPlay",
          //   query: {url:url}
          // });
          // window.open(routeUrl.href, '_blank');
        }else if(file.suffix.toLowerCase() == "pdf"){
          this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
            this.imgurl = window.URL.createObjectURL(blob);
            this.handlePdfFile(this.imgurl)
          });
        }else if(file.suffix.toLowerCase() == "png"||file.suffix.toLowerCase() == "jpg"||file.suffix.toLowerCase() == "gif"){
          this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
            // this.imgurl = window.URL.createObjectURL(blob);
            this.handleImageFile(blob);
          });
        }else{
          this.$message("当前文件不支持预览，请下载查看");
        }
      },
      getType(file) {
        console.log(file);
        var filename = file;
        var index1 = filename.lastIndexOf(".");
        var index2 = filename.length;
        var type = filename.substring(index1 + 1, index2);
        console.log(type);
        return type;
      },
      groupClick(data){
        this.$store.state.placeHolder = "搜索群组下的文件/文件夹"
        console.log(data);
        this.setSearchInput("");
        this.showgroup = false;
        if(data.isOwner == 1){
          // this.$store.state.placeHolder = "搜索群组名称"
          this.groupName = "";
          this.nameList = [];
          this.currentGroup="我创建的群组";
        }else if(data.isOwner == 0){
          // this.$store.state.placeHolder = "搜索群组名称"
          this.groupName = "";
          this.nameList = [];
          this.currentGroup="我加入的群组";
        }
        this.currentindex = data.groupId;
        this.showsearch = false;
        this.idList = ['-1'];
        this.nameList = [];
        this.showgroup = true;
        this.showUserList = false;
        this.out = false;
        this.groupIdTemp = data.groupId;
        this.isOwnerTemp = data.isOwner;
        this.groupName = data.groupName;
        this.getShareDir(data.groupId);
      },
      getShareDir(para,a) {
        this.isCollect = true;
        if(a){
          this.idList = [0,-1];
        }
        console.log(this.idList);
        this.nameList = [];
        this.tempGroupId = para;
        this.listLoading = true;
        this.fileList = [];
        this.$http.get("/groupInfo/getShareDir",{
          params:{
            groupId:para,
            fileName:""
          }
        }).then(res => {
          console.log("getShareDir:", res);
          if (res.status === 200) {
            let file_icon;
            let { data } = res;
            console.log(data);
            data.forEach((v, k) => {
              if(v.fileName != null){
                let suffixTemp = v.fileName.split(".");
                if (suffixTemp.length > 1) {
                  suffixTemp = suffixTemp[suffixTemp.length - 1];
                  file_icon = "icon_list_" + suffixTemp;
                } else if(v.fileType==0){
                  suffixTemp='';
                }else {
                  suffixTemp = null;
                }
                this.fileList.push({
                  id: v.id,
                  userEmail: v.userEmail,
                  fileName: v.fileName,
                  updateTime: v.createTime == null ? "暂无数据" : v.createTime,
                  suffix: suffixTemp,
                  fileType: v.fileType,
                  fileHash: v.fileHash,
                  size: this.$getFileSize(v.fileSize),
                  iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                  isFavorites: v.isFavorites,
                  realName:v.realName,
                  fileSize:v.fileSize,
                  fileNameShow:this.getFontShowLength(v.fileName),
                });
              }
            });
            if (res.status === 200) this.listLoading = false;
          }
        });
      },
      saveGroup() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.addSubmitLoading = true;
            this.addFormVisible = true;
            this.$http
              .post("/groupInfo/saveGroup", { name: this.addForm.name })
              .then(res => {
                console.log("addSubmit", res);
                if (res.status == 200) {
                  this.groupInfo();
                  this.addSubmitLoading = false;
                  this.addFormVisible = false;
                  this.$message({
                    type: "success",
                    message: "创建成功"
                  });
                } else {
                  this.$message.error(res.msg);
                  this.addSubmitLoading = false;
                }
              });
          }
        });
      },
      addHandle() {
        this.addFormVisible = true;
        this.addForm = { name: "" };
      },
      handleOpen(key, keyPath) {
        this.fileList = [];
        this.setSearchInput("");
        this.currentGroup = "";
        this.groupIdTemp = "";
        this.showgroup = false;
        console.log("debug============",key, keyPath);
        if(key == 1){
          if(this.currentGroup!="我创建的群组"){
            console.log(3);
            this.currentindex = 0;
            this.$store.state.placeHolder = "搜索群组名称"
            this.groupName = "";
            this.nameList = [];
            this.currentGroup="我创建的群组";
          }
          this.fileList = this.data1;
        }else{
          if(this.currentGroup!="我加入的群组"){
            console.log(4);
            console.log(this.currentindex);
            this.currentindex = 0;
            this.$store.state.placeHolder = "搜索群组名称"
            this.groupName = "";
            this.nameList = [];
            this.currentGroup="我加入的群组";
          }
          this.fileList = this.data2;
        }
      },
      handleClose(key, keyPath) {
        this.fileList = [];
        this.showgroup = false;
        this.currentGroup = "";
        this.groupIdTemp = "";
        console.log(key, keyPath);
        if(key == 1){
          if(this.currentGroup!="我创建的群组"){
            console.log(1);
            this.currentindex = 0;
            this.$store.state.placeHolder = "搜索群组名称"
            this.groupName = "";
            this.nameList = [];
            this.currentGroup="我创建的群组";
          }
          this.fileList = this.data1;
        }else{
          if(this.currentGroup!="我加入的群组"){
            console.log(2);
            this.currentindex = 0;
            this.$store.state.placeHolder = "搜索群组名称"
            this.groupName = "";
            this.nameList = [];
            this.currentGroup="我加入的群组";
          }
          this.fileList = this.data2;
        }
      },
      groupInfo(data) {
        this.data1 = [];
        this.data2 = [];
        this.fileList = [];
        this.nameList = [];
        this.idList= [];
        this.groupName = "";
        this.groupIdTemp = "";
        if(data == undefined){
          this.ownerGroup = [];
          this.addedGroup = [];
          this.$store.state.placeHolder = "搜索群组名称"
          this.showgroup = false;
          name = ""
        }else{
          name = data;
        }
        this.$http.get("/groupInfo/list",{
          params:{
            groupName:name,
          }
        }).then(res => {
          console.log("getGroup:", res.data);
          if(res.data.length>0){
            this.hasgroup = true;
          }else{
            this.hasgroup = false;
          }
          let groups = res.data;
          if (groups == 0 && data == undefined) {
            this.hasgroup = false;
          } else if(data == undefined){
            this.hasgroup = true;
          }
          if (res.status === 200 && !(groups == false)) {
            this.deleteVisible = true;
            // this.groupIdTemp = groups[0].groupId;
            // this.groupName = groups[0].groupName;
            // this.getShareDir(groups[0].groupId);
            this.isOwnerTemp = groups[0].isOwner;
            console.log("====", this.isOwnerTemp);
          }
          groups.forEach((val,key)=>{
            if(val.isOwner == 1){
              if(data == undefined){
                this.ownerGroup.push(val);
              }
                this.data1.push({
                groupId:val.groupId,
                groupName:val.groupName,
                isGroup:true,
                realName:val.realName,
                fileName: val.groupName,
                suffix:null,
                updateTime: val.createTime == null ? "-" : val.createTime,
                fileType: 1,
                size:"-",
                iconcls:"icon_list_folder",
                isFavorites: val.isFavorites,
                fileNameShow:this.getFontShowLength(val.groupName),
              });
            }else{
              if(data == undefined){
                this.addedGroup.push(val);
              }
                this.data2.push({
                groupId:val.groupId,
                groupName:val.groupName,
                isGroup:true,
                realName:val.realName,
                fileName: val.groupName,
                suffix:null,
                updateTime: val.createTime == null ? "-" : val.createTime,
                fileType: 1,
                size:"-",
                iconcls:"icon_list_folder",
                isFavorites: val.isFavorites,
                fileNameShow:this.getFontShowLength(val.groupName),
              });
            }
          })
        });
        if(this.currentGroup == "我创建的群组"){
          this.fileList = this.data1;
        }else {
          this.fileList = this.data2;
        }
      },
      getFontShowLength(str){
        if(this.abslength(str)<=30){
          return str.length;
        }
        let tmp=0;
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        for(let i=0;i<str.length;i++){
          let a;
          if(pattern.test(str[i])==true){
            tmp+=2;
            a=-1;
          }else{
            tmp++;
            a=2;
          }
          if(tmp>30){
            console.log(i);
            return i;
          }
        }
      },
      abslength( str ) {
        return str.replace(/[^\x00-\xff]/ig, '**').length;
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    #groupsbox{
        .el-input__inner{
            height: 36px;
        }
        .el-pagination .el-input__inner{
            height: 28px!important;
        }
        .focus{
            background-color: #549DE8!important;
        }
        .el-menu-item-group__title{
            padding:0;
        }
        .el-menu-item{
            height: 40px;
            line-height: 40px;
        }
        .el-menu-item:hover{
            background: #f6f6f6!important;
        }
        .el-submenu__title:hover{
            background: #f6f6f6!important;
        }
        .el-submenu__title{
            height: 40px;
            line-height: 40px;
        }
    }
</style>
<style scoped lang="scss">
  @import "scss_vars";

  #groupsbox {
    position: absolute;
    margin-left: 120px;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    .toolbar{
      background-color: $main-bg;
    }
    .el-pagination{
        padding-bottom:30px;
    }
    .el-aside {
      flex: 0 0 200px;
      height: 100%;
      width: 200px !important;
      overflow-y: auto;
      overflow-x: auto;
      border-right: 1px solid $black-bg;
      background: #F6F6F6;
        .tac{
            height: 100%;
            .el-col{
                height: 100%;
                .el-menu{
                    border:0!important;
                    .el-submenu{
                        img{
                            margin-right:7px;
                        }
                    }
                    .active{
                        color:#549de8;
                    }
                    .no-active{
                        color:#666;
                    }
                }
            }
        }
    }
    .el-header{
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-row{
            display: flex;
            align-items: center;
            .el-button{
                padding:10px;
                width: 82px;
            }
            .tit {
                line-height: 54px;
                padding-left:20px;
                border-left:1px solid #eee;
                margin-left: 20px;
                i:hover{
                 text-decoration: underline;
                 cursor: pointer;
            }
        .current{
          color:#2b2b2b;
          font-weight: 900;
        }
      }
            .el-button-group{
                 .el-button{
                     padding:10px;
                     width: 42px;
                 }
                 .focus{
                     background: #549de8;
                     border-color: #409EFF;
                     color: #fff;
                 }
             }
            .refresh{
                margin-left:10px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 42px;
                height: 36px;
            }
        }
    }
    .file-icon{
      background: url("/static/bigicon.png") no-repeat -196px 0px;
      display: inline-block;
      width: 28px;
      height: 29px;
      margin-left: 10px;
    }
      .el-table--small td{
          padding:12px 0!important;
      }
      .file-name{
          margin-left:10px;
      }
      .file-name:hover{
          text-decoration:underline;
          cursor:pointer;
      }
      .dirPath:hover{
          text-decoration:underline;
          cursor:pointer;
      }
      .options-list span {
          color: #01b1a2;
      }
      .options-list span :hover {
          color: #f5f7fa;
      }
      .folder-box{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .folder-box-options {
          display: none;
      }
      .folder-box:hover .folder-box-options {
          height: 23px;
          display: inline-block;
          float: right;
          font-weight: 700;
      }
    .el-main {
      flex: 1;
      overflow-y: scroll;
      background: white;
      padding: 0;
        .el-header{
            height: 54px;
            display: flex;
            justify-content: space-between;
            .buttonLeft{
                display: flex;
                .createGroup{
                    width: 126px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .setting{
                    margin-left: 10px;
                    width: 91px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .el-button{
                        height: 36px;
                    }
                }
            }
            .buttonRight{
                display: flex;
                .currentSearch{
                    width: 180px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .members{
                    margin-left:10px;
                    width: 83px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .addPerson .el-select {
        width: 100%;
    }
  }
</style>
